<template>
  <top-navbar title="支付" />
  <div class="payDetail min-h-screen from-hex-FFFFFF to-hex-F5F5F5 bg-gradient-to-b px-32rpx pb-32rpx">
    <div class="flex flex-col items-center">
      <div class="mb-46rpx mr-10rpx mt-86rpx flex items-center justify-center overflow-hidden rounded-50%">
        <uni-icons type="checkbox-filled" color="#ABCD03" size="50" />
      </div>
      <div class="mb-36rpx text-36rpx font-bold text-hex-333333">支付成功</div>
      <div class="mb-56rpx flex">
        <div
          class="mr-28rpx h-72rpx w-198rpx border-2rpx border-hex-ABCD03 rounded-46rpx border-solid text-center text-28rpx leading-72rpx text-hex-ABCD03"
          @click="navTo('/pages-mine/order?appType=3')">
          查看订单
        </div>
        <div
          class="h-72rpx w-198rpx rounded-46rpx bg-hex-ABCD03 text-center text-28rpx leading-72rpx text-hex-ffffff"
          @click="reLanchTo('/pages/mall')">继续逛商城</div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="mt-32rpx">
      <div class="mb-20rpx">
        <break-divider text="猜你喜欢" />
      </div>
      <s-waterfall :datalist="collectShop" :column="2" class="mt-32rpx">
        <template #default="{ item }">
          <div class="mb-30rpx mr-28rpx rounded-32rpx bg-hex-fff pb-10rpx" @click="navTo(`/pages-shop/goodsdetails?productId=${item.productId}`)">
            <div class="bg-water w-326rpx flex items-center justify-center rounded-xl bg-hex-FAF9F8 py-40rpx">
              <image
                class="will-change h-190rpx w-130rpx rounded-24rpx"
                lazy-load
                :src="item.productImage" mode="widthFix" />
            </div>
            <div class="p-15rpx">
              <text
                class="multiLine-hiddle hide2 mx-10rpx mt-10rpx inline-block text-24rpx text-hex-333">{{ item.productIntro }}</text>
              <div
                v-if="item.newState===1"
                class="my-20rpx w-48rpx rounded-5rpx bg-hex-FFF2E3 p-3rpx text-20rpx font-500 text-hex-E89C43">
                上新
              </div>
              <div class="flex items-center justify-between">
                <div>
                  <div class="flex items-end">
                    <div class="text-34rpx font-400 text-hex-ff4d4e">¥{{ item.productPrice }}</div>
                    <div class="textdecor ml-10rpx text-24rpx font-500 text-hex-999">￥{{ item.cost }}</div>
                  </div>
                  <div class="textdecor text-24rpx font-500 text-hex-999">已售{{ item.saleNum??0 }}</div>
                </div>
                <image :src="`${cdnUrl}/imgs/shop/cart-icon.png${imgVersion}`" class="h-44rpx w-44rpx" />
              </div>
            </div>
          </div>
        </template>
      </s-waterfall>
    </div>
  </div>

</template>

<script lang="ts" setup>

onLoad((options) => {

})

let collectShop: any = $ref([])
let pageNo = $ref(1)
let totalPage = $ref(0)
//获取猜你喜欢数据
const getLikeData = async () => {
  const { data, error, status } = await Fetch('/qqyapi/product/product/categoryArea/recommendProductList', {
    method: 'get',
    data: { appType: 3, pageNo, pageSize: 10 }, //首页只展示3个，点击查看更多
  })
  if (status === 200 && data.code === 0) {
    collectShop = [...collectShop, ...data.result.list]
    totalPage = data.totalPage
  }
}
//下滑加载更多数据
const getMoreData = () => {
  if (totalPage !== pageNo) {
    pageNo++
    getLikeData()
  }
}
onReachBottom(() => {
  getMoreData()
})
onMounted(() => {
  // getOrderDetail()
  getLikeData()
})

</script>

<style lang="scss" scoped>
.payDetail{
  .font-numberFont{
    font-family:'DingTalk JinBuTi';
  }

  .boxShadow{
    box-shadow: 0rpx 8rpx 40rpx 0rpx rgb(0 0 0 / 6%);
  }
}
</style>
